登出功能原來是寫在 Home.vue 當中，但像這種登出功能，是很多頁面其實也會用到，
像這類型的功能，如果能夠一直往父層去放的話，比較能達到所謂共用的目的。

所以呢，就是要將功能放到父層的 App.vue 元件。

修改 Home.vue

在 src/views/Home.vue 檔案中，有一個函式如下：

signout(){
  localStorage.removeItem("jwt");
  alert("登出成功");
  location.reload();
}

將這段程式移除，然後移到 src/App.vue 檔案中。

然後 Home.vue 繼續修改，加以下一行原始碼：

export default {
  emits: ["signout"], // 加上這行
  // ...
  data(){
    // ...
  }
}

這行原始碼，就是定一個自訂事件，該事件會往父層傳遞。

然後在 template 標籤當中，有一行原始碼如下：

button(type="button" @click="signout") 登出

改成：

button(type="button" @click="$emit('signout')") 登出

也就是登出按鈕點擊下去之後，會觸發 signout 事件。

修改 App.vue

在 src/App.vue 檔案中，按照上述，已經有加了 signout 函式，然後呢，以下這行：

component(:is="Component" :key="$route.path" :login-status="loginStatus")

改成：

component(:is="Component" :key="$route.path" :login-status="loginStatus" @signout="signout")

這行的 @signout="signout"，就是定義了一個 signout 事件，如果觸發的話，就執行 signout 函式。

這樣的結果呢，就是任何子元件，都可以去觸發 signout 事件，挺不錯的。

結語

練習了使用 $emit 來觸發自訂事件，滿好的，當內層的元件，想要往父層去觸發某個函式的話，就適合用自訂事件這樣的方式，也就是登出功能就適合。